{% extends "base.html" %}

{% load static %}

{% block script %}

    {{ script.super }}

    <script xmlns="http://www.w3.org/1999/html">
        function createAutoClosingAlert(selector, delay) {
            var alert = $(selector).alert();
            window.setTimeout(function () {
                alert.alert('close')
            }, delay);
        }

        $(function () {
            var deleted_successful = {{ deleted }};
            if (deleted_successful == true) {
                createAutoClosingAlert('notification', 2000);
            }

        });
    </script>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css"/>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

    <script>
        $(function () {
            var availableTags = {{ titles|safe }};
            $("#search_value").autocomplete({
                source:availableTags
            });
        });
    </script>

{% endblock %}



{% block content %}
    <style type="text/css">
        h3 {
            text-align: left;
        }
    </style>

    <style xmlns="http://www.w3.org/1999/html">
        a:link {
            color: #000000;
        }

        a:hover {
            color: #ff4500;
        }
    </style>

    <div id="notification"></div>

    {% for message in messages %}
        <div class="alert alert-{{ message.tags }}">
            <button type="button" class="close" data-dismiss="alert">×</button>
            {{ message }}
        </div>
    {% endfor %}

    <form class="form-search pull-right" method="post">
        <div class="input-append">
            <label for="search_value"></label>
            <input type="text" id="search_value" name="search_value" class="span2 search-query"
                   placeholder="Survey title">
            <button type="submit" class="btn btn-inverse">Search <i class="icon-search icon-white"></i></button>
        </div>
    </form>


    <div class="row" style="margin-left: 0px;">
        <table class="table table-striped table-bordered">
            <h2 class="pull-left" style="margin-left: 5px;">My surveys</h2>
            <thead>
            <tr>
                <th>Active</th>
                <th>Title</th>
                <th>Last Modified</th>
                <th>Responses</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            {% for survey in surveys %}
                <tr>
                    <td>
                        {% if survey.is_published %}
                            <span style="padding-left:10px"><i class="icon-ok-circle"></i></span>
                        {% else %}
                            <span style="padding-left:10px"><i class="icon-ban-circle"></i></span>
                        {% endif %}
                    </td>
                    <td>{{ survey.title }}</td>
                    <td>{{ survey.last_modified }}</td>
                    <td>{{ survey.responses.all|length }}</td>
                    <td>

                        <span style="padding-left:10px"><i class="icon-edit"></i><a
                                href="/edit_survey/{{ survey.key }}/">Edit</a></span>


                        {% if survey.is_published %}
                        <span style="padding-left:10px"><i class="icon-share"></i><a href="#share_dialog"
                                                                                     data-toggle="modal"
                                                                                     onclick="share({{ survey.id }})">Share</a></span>
                        {% endif %}
                        {% if not survey.is_published %}
                        <span style="padding-left:10px"><i class="icon-heart"></i><a href="#collaborate_dialog"
                                                                                     data-toggle="modal"
                                                                                     onclick="collaborate({{ survey.id }})">Collaborate</a></span>
                        {% endif %}
                        <span style="padding-left:10px"><i class="icon-trash"></i><a
                                href="/delete_survey/{{ survey.key }}/">Delete</a></span>
                        <span style="padding-left:10px"><i class="icon-globe"></i><a
                                href="/view_survey/{{ survey.key }}/">Go to live form</a></span>
                        <span style="padding-left:10px"><i class="icon-print"></i><a
                                href="/print_survey/{{ survey.key }}/">Print</a></span>

                        <span style="padding-left:10px"><i class="icon-file"></i><a href="/analyse/{{ survey.key }}/">Analyse</a></span>

                        <div id="survey_collaborator_list_{{ survey.id }}" style="display: none;">
                            {% if survey.get_collaboration|length %}
                            <table class="table">
                                <thead>
                                <th>Name</th>
                                <th>Date Invite</th>
                                <th>Status</th>
                                </thead>
                                {% for collaboration in survey.get_collaboration %}
                                        {% if collaboration.is_active %}
                                            <tr class="success">
                                                {% else %}
                                            <tr class="warning">
                                        {% endif %}
                                        <td>{{ collaboration.user }}</td>
                                        <td>{{ collaboration.date_sent }}</td>
                                        {% if collaboration.is_active %}
                                            <td>Active</td>
                                        {% else %}
                                            <td>Pending</td>
                                        {% endif %}
                                        <td>
                                            <a href="/collaborate/remove_collaborator/{{ survey.id }}/{{ collaboration.user_id }}"><i
                                                    class="icon-remove"></i></a></td>
                                        </tr>
                                {% endfor %}
                            </table>
                            {% endif %}
                        </div>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <h3 class="pull-left tooltip-demo bs-docs-tooltip-examples">
            <a class="btn btn-large btn-danger" href="/edit_survey/"><i class="icon-pencil icon-white"></i> Create
                Survey</a>
            <a href="#" rel="tooltip" data-placement="top" title="how to create a survey?
1. Click on create survey button;
2. Select the desired question type and click add button;
3. Click on the white colour box to key in question;
4. Click the confirm button to confirm the question;
5. Click publish button to publish the survey. "><i class="icon-question-sign" style="margin-top: 5px;"></i></a>
        </h3>
    </div>
<br>
    <div class="row" style="margin-left: 0px;">
        <h2 class="pull-left tooltip-demo bs-docs-tooltip-examples">Collaborated surveys

            <a href="#" rel="tooltip" data-placement="top" title="What is Collaborated Surveys?
After creating your survey, you can choose your collaborator in My surveys list.
Once your collaborator accepts the invitation, you will be able to see the survey in the list of Collaborated Surveys."><i class="icon-question-sign" style="margin-top: 5px;"></i></a>
        </h2>
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th>Active</th>
                <th>Title</th>
                <th>Last Modified</th>
                <th>Response</th>
                <th>Owner</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            {% for survey in collaborated_surveys %}
                <tr>
                    <td>
                        {% if survey.is_published %}
                            <span style="padding-left:10px"><i class="icon-ok-circle"></i></span>
                        {% else %}
                            <span style="padding-left:10px"><i class="icon-ban-circle"></i></span>
                        {% endif %}
                    </td>
                    <td>{{ survey.title }}</td>
                    <td>{{ survey.last_modified }}</td>
                    <td>{{ survey.responses.all|length }}</td>
                    <td>{{ survey.user.username }}</td>
                    <td>
                        <span style="padding-left:10px"><i class="icon-edit"></i><a
                                href="/edit_survey/{{ survey.key }}/">Edit</a></span>

                        <span style="padding-left:10px"><i class="icon-trash"></i><a
                                href="/collaborate/delete/{{ survey.id }}">Delete</a></span>
                        <span style="padding-left:10px"><i class="icon-globe"></i><a
                                href="/view_survey/{{ survey.key }}/">Go to live form</a></span>
                        <span style="padding-left:10px"><i class="icon-print"></i><a
                                href="/print_survey/{{ survey.key }}/">Print</a></span>
                        <span style="padding-left:10px"><i class="icon-file"></i><a href="/analyse/{{ survey.key }}/">Analyse</a></span>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="modal hide" id="collaborate_dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <form class="modal-form" action="/collaborate/invite/" method="post">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Invite users to collaborate</h3>
            </div>
            <div class="modal-body">

                <p>Please enter collaborator username/email</p>
                <textarea class="input-block-level" rows="3" name="collaborators"
                          placeholder="Seperate multiple username/email by comma(,)"
                          onkeyup="($(this).val() == '') ? $('#collaborate_submit_but').attr('disabled', 'disabled') : $('#collaborate_submit_but').removeAttr('disabled');"></textarea>
                <input type="hidden" id="survey_id" name="survey_id"/>

                <div id="collaborator_list">
                    <table class="table table-hover">


                    </table>
                </div>


            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button id="collaborate_submit_but" type="submit" class="btn btn-primary" disabled="disabled">Invite
                </button>
            </div>
        </form>
    </div>

    <div class="modal hide" id="share_dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <form class="modal-form" action="/share_survey/" method="post">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Share survey through email</h3>
            </div>
            <div class="modal-body">
                <img src="{% static "img/shareshow.png"%}" alt="Share Survey">
                <div class="progress">
                    <div class="bar bar-success" style="width: 33%;"></div>
                    <div class="bar bar-warning" style="width: 33%;"></div>
                    <div class="bar bar-danger" style="width: 0%;"></div>
                </div>
                <p>Email</p>
                <textarea class="input-block-level" rows="1" name="collaborators"
                          placeholder="Seperate multiple email by comma(,)"
                          onkeyup="($(this).val() == '') ? $('#share_submit_but').attr('disabled', 'disabled') : $('#share_submit_but').removeAttr('disabled');"></textarea>

                <p>Message</p>
                <i>{% if user.first_name and user.last_name %}
                    {{ user.first_name }} {{ user.last_name }}
                {% else %}
                    {{ user.username }}
                {% endif %}
                    ({{ user.email }}) invites you to take the survey .
                    <br/>
                    Follow this link to open the survey:<br/>
                    (survey link)<br/><br/>
                </i>

                <textarea class="input-block-level" rows="4" id="owner_message" name="owner_message"
                          placeholder="Type here to enter your personal message (optional)"></textarea>
                <input type="hidden" id="share_survey_id" name="survey_id"/>

                <div id="collaborator_list"></div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button id="share_submit_but" type="submit" class="btn btn-primary" disabled="disabled">Share</button>
            </div>
        </form>
    </div>
{% endblock %}

